<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/jquery-1.11.1.min.js"></script>
		

		<script>
			$(document).ready(function() {
				
				var a = {name:"赵六",age:21,sex:"男"};
				var b = {name:"李四",age:17,sex:"男"};
				var c = {name:"王五",age:16,sex:"女"};
				
				var d = [a,b,c];
					
					
				$("#b1").click(function(){
				
					for(var i=0;i<d.length;i++){
						console.log(d[i].name);
						console.log(d[i].age);
						console.log(d[i].sex);
						
						var text = "<tr>"+
									"<td>" + d[i].name + "</td>" +
									"<td>" + d[i].age + "</td>" +
									"<td>" + d[i].sex + "</td>" +
									"<td><Button>删除</Button></td>" +
									"</tr>"
						
						$("table").append(text);
						
					}
					
					
					deleteUser();
					
				});
				
				
				
				// 新增对象方法
				$("#b2").click(function(){
					
					var user = userInfo();
					
					var text = "<tr>"+
								"<td>" + user.userName + "</td>" +
								"<td>" + user.userAge + "</td>" +
								"<td>" + user.userSex + "</td>" +
								"<td><Button>删除</Button></td>" +
								"</tr>"
					
					$("table").append(text);
					
					deleteUser();
					
				});
				
				
				
				// 用户信息输入方法
				function userInfo(){
					var user = {};
					user.userName = prompt("用户姓名");
					user.userAge = prompt("用户年龄");
					user.userSex = prompt("用户性别");
					
					// alert(user);
					
					// if(null in user){
					// 	alert("aa");
					// }
					
					return user;
					
				}
				
				
				
				function deleteUser(){
					// 删除对象方法
					$("table button").click(function(){
						$(this).parent().parent().remove();
						// var a = $(this).text();
						// console.log(a);
					});
				};
				
				deleteUser();
				
				
			});
		</script>


		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: #8A2BE2;
			}
			
		</style>


	</head>

	<body>

		<table border="1px">
			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>22</td>
				<td>男</td>
				<td><button>删除</button></td>
			</tr>
			
		</table>
		
		
		<button id="b1">基本人员</button>
		
		<button id="b2">新增人员</button>
		
		

	</body>
	
	
	<!-- 基本人员功能 -->
	<!-- 1,首先定义3个对象,然后将3个对象放在数组里面,形成对象数组 -->
	<!-- 2,通过循环,在循环中拼接对象的值,以及对象需要的标签,并且添加 -->
	
	<!-- 新增人员功能 -->
	<!-- 1,通过3个弹框，获取到3个值 -->
	<!-- 2,将3个值拼接到标签里面去，然后添加 -->
	
	
	
	
	
	
	
	

</html>

